阅读更多

22顶
0踩

Web前端
作为前端开发者,我们会碰到很到各种各样的jQuery插件。今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到。

1、jQuery多图并列焦点图插件

这是一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示。和其他jQuery焦点图一样,这款焦点图插件的图片下方也有一排小按钮,可以任意切换图片。另外,每张图片也都有文字描述。



在线演示  /  源码下载

2、jQuery动画焦点图,可自动播放图片

这是一款简单而实用的jQuery焦点图插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图片之上。由于其简单的配置,这款jQuery焦点图可以很方便地与你的网站相结合。



在线演示  /  源码下载

3、jQuery缩略图动态缩放焦点图

这是一款jQuery焦点图,这款jQuery焦点图的图片切换按钮是几张图片的缩略图,鼠标滑过缩略图即可切换至相应的图片。焦点图的切换动画是图片的动态缩放,动画效果还算新颖,图片切换也比较流畅,是一款值得一试的jQuery焦点图。



在线演示  /  源码下载

4、jQuery全屏滑块焦点图,可自定义内容

这是一款基于jQuery的全屏方式滑块焦点图插件,滑块的内容可以自定义,可以是几张图片的组合,也可以是横幅广告。



在线演示  /  源码下载

5、jQuery/CSS3动画相册图片浏览插件

这款jQuery相册插件利用了CSS3特性,当我们点击图片浏览的时候,缩略图就会以淡入淡出的动画效果消失,然后出现原始图片。同时你也可以点击左右按钮来逐一浏览相册中的图片。



在线演示  /  源码下载

6、jQuery纵向滑块焦点图插件,图片切换流畅

这是一款效果很酷的jQuery焦点图,它的Tab切换方式是纵向的,而且图片切换的方式也是纵向的,另外整个jQuery焦点图的色彩非常棒,给人一种神秘的感觉。焦点图的图片切换还是比较流畅的。



在线演示  /  源码下载

7、jQuery/CSS3立方体翻转3D全屏焦点图

这是一款非常大气的HTML5/CSS3 3D全屏焦点图,在页面两侧,有两个很立体的左右箭头进行图片切换。这款HTML5焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,我们已经将文字替换成图片,效果更酷。



在线演示  /  源码下载

希望以上jQuery图片滑块插件能给你带来帮助,欢迎收藏分享。
  • 大小: 110.4 KB
  • 大小: 47.9 KB
  • 大小: 49.4 KB
  • 大小: 45 KB
  • 大小: 28 KB
  • 大小: 71 KB
  • 大小: 44.9 KB
  • 大小: 39.7 KB
来自: html5tricks
22
0
评论 共 30 条 请登录后发表评论
30 楼 jf0820 2014-08-19 17:51
之得收藏。。。
29 楼 mistake 2014-08-04 15:59
赞- 赞            
28 楼 cy609277054 2014-07-31 22:51
有没有可以自适应的啊?
27 楼 绮梦纤风奔奔 2014-07-31 11:51
mark!
26 楼 落雪封 2014-07-30 14:52
效果很好
25 楼 jinpengaigo 2014-07-29 14:40
mark
24 楼 huangsky 2014-07-28 17:57
mark
23 楼 elegantboy2014 2014-07-24 13:56
马克一下,多谢了!
22 楼 IT勺子 2014-07-23 16:14
为什么没有早点发出来。 之前找了好久,找不到合适的,只好自己写了一个简单实现的。
21 楼 jiang0 2014-07-23 11:32
mark 
20 楼 caizhilin2010 2014-07-22 15:50
mark.
19 楼 香烟与酒 2014-07-22 10:28
mark 一下
18 楼 wellbbs 2014-07-22 09:19
mark

以后用
17 楼 nfjkbh516 2014-07-21 09:53
mark一下
16 楼 willpowersong 2014-07-19 14:04
mark一下  以备后用
15 楼 devil__lord 2014-07-18 10:35
mark 一下
14 楼 syj0301 2014-07-17 17:36
赞 MARK
13 楼 yujiain2008 2014-07-16 16:09
mark一下
12 楼 我爱小白 2014-07-15 10:55
这必须顶啊!
11 楼 liutao1314 2014-07-15 09:48
mark 一下

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial 前38节)

    C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十二) 雷、混、冰、毒、火、风 - 幻化中的魔法魅力! C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十三) 锦上添花之魔法特效装饰 ...

  • python制作冰花_神奇的冰花

    在上周我们发现了冰,并且通过让孩子们自己观察记录知道了水在零度以下会结成冰。老师们也都觉得关于冰还可以让孩子们了解更多科学方面的问题,有很多可以发掘的点。所以这周我们延续了有关“冰”的探索活动,决定带...

  • 【C++】原神角色管理系统——基于vs的系统开发

    B站:【原神】原神系统演示_原神 以下是代码部分(有点长): #include <iostream> #include <fstream> #include <string> #include <conio.h> #include<cstring> #include<...

  • 《原神》都已经火成现象级游戏了,怎么还没人去Copy它?(技术向分析)

    《原神》大家肯定都很熟悉了,自去年年末上线以来就引得无数话题,首当其冲的当然还是动画风格的“救公主”游戏,哦不对,应该是《原神》的二次元画面吸引眼球啊,对对对,就是因为画风和元素机制吸引眼球,果然当时...

  • 推荐CSDN排名前1000博主

    博主 简介 stpeace 排名:1 原创:2166 粉丝:7180 积分:181660 ... 本博客供大家交流,欢迎各抒己见。博文中的内容禁止用 yuanmeng001 排名:2 原创:52...

  • 杭电oj 2048 神、上帝以及老天爷 C语言

    从n=3开始符合要求的情况数量满足公式f(n)=(n-1)*(f(n-1)+f(n-2));而总共会发生的情况符合 n!最后将符合要求的数量除以总数取百分比即为所求;

  • 常用移动web开发框架

    纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch...

  • A - 小雷的冰茶几

    一些茶几是冻在一起的,因此一套冰茶几分为好几部分,并且如果茶几A与B冻在一起,B与C冻在一起,那么A与C也就冻在了,即冰冻状态有传递性,ABC此时会看作一个整体。 为了保证冰茶几的完整性,小雷每次只能移

  • Unity3D游戏开发之RPG游戏剧情呈现策略

    距离7月8日仙剑六上市已经过去两个月了,仙剑六就像沉寂在冰下的水终于渐渐冷清下去,这段时间大家对游戏周边、MMD、同人视频、同人小说、Cosplay等的关注度要大大地超过对游戏本身的关注。我一直认为一个游戏是用来...

  • 2022米哈游面试题之原神元素反应

    1.(本题数据范围暂无,T(开尔文),V(升),E(1),N(1),均为double类型)在《原神》中,当元素量(N)极小时,多组分元素作用在同一对象上有时不会发生反应。在被作用对象温度(T)和体积(V)恒定时,①混合...

  • Jetpack学习之 Hilt,android应用开发入门答案

    下面是Google官方推荐的Android应用架构图: 该图不多做说明,郭神的文章中就已经分析了该图片,Jetpack完全就是为该图架构服务。 Activity / Fragment是由系统所创建的,所以我们可以不用关心如何去创建。 ...

  • 原神评测

    至今,一款由米哈游开发的游戏《原神》已经历一测、二测,作为这两次测试的桃服与梦服玩家,我想给《原神》写一个游戏评测。 游戏类型 游戏剧情 游戏世界 游戏玩法 简单的游戏介绍: 《原神》的游戏类型 首先,这...

  • C语言大作业实现 原神 小小小游戏界面

    {5, "神里绫华","冰", .hqCoord.X=1, .hqCoord.Y=3}, {6, "夜兰", "水", .hqCoord.X=2, .hqCoord.Y=2}, }; Monster monsterArray[] = { {1, "丘丘人", 1, 100, 5, 2, 5, 10, 5, 1, {1, 0}}, {2, "骗骗花", 2, 200, ...

  • 游戏开发常用字体(自制)

    这个不用多讲。

  • 百度远场语音开发套件 1.开箱分析

    我们来看一下开发套件本身吧,本套件使用的开发板是来自深圳市百能达电子有限公司和百度联手打造的RK3308开发板,拥有128M的ram和128M的flash。cpu采用的是微芯瑞的rk3308,4核ARM Cortex-A35。 当然还有别的...

  • 移动web开发框架研究

     纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS。jQuery M

  • 从autojs到冰狐智能辅助的心里历程

    autojs无疑是目前为止比较不错的...由于我不是专业开发人员,了解一点编程知识但不熟练,所以之前每次遇到项目时我都出钱让别人帮忙写autojs来实现,但随之而来的就是一个巨大的坑,就是后期由于各种原因(比如项目变

  • 冰河的大学生活,两个好基友:二神和波妞,哈哈,挺有意思的

    今天,我们就不聊技术了,跟大家聊聊我有趣并充实的大学生活,以及我跟两个好基友:二神和波妞的故事。哈哈~~

  • 历小冰的由来和神奇的丘奇数

    新的微信公众号叫程序员历小冰,历冰是我在蚂蚁金服实习时的花名,也是我比较喜欢电视连续剧中主角的化名。可怜的张狗蛋,他一定会再回来的。?? 接下来,我还是会持续关注后端开发技术,为大家带来更具阅读价值的...

  • 安装NumPy教程-详细版

    附件是安装NumPy教程_详细版,文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!

Global site tag (gtag.js) - Google Analytics